<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>1-初体验</title>
  </head>
  <body>
    <div class="container">
      <h2 class="page-header">Promise 初体验</h2>
      <button class="btn btn-primary" id="btn">点击抽奖</button>
    </div>
  </body>
  <script>
    //生成随机数
    function rand(m, n) {
      return Math.ceil(Math.random() * (n - m + 1)) + m - 1;
    }
    // 点击按钮，1S后显示是否中奖（30%概率中奖）
    // 若中奖 弹出恭喜，奖品为10万 RMB 劳斯莱斯优惠卷
    // 若未中奖弹出 再接再厉

    //获取元素对象
    const btn = document.querySelector("#btn");
    //绑定单击事件
    btn.addEventListener("click", function () {
      //定时器
      //   setTimeout(() => {
      //     //30% 1-100 1 2  30
      //     //获取1-100的一个随机数
      //     let n = rand(1, 100);
      //     //判断
      //     if (n <= 30) {
      //       alert("恭喜,奖品为10万 RMB 劳斯莱斯优惠卷");
      //     } else {
      //       alert("再接再厉");
      //     }
      //   }, 1000);

      //Promise 形式实现
      //resolve 解决 函数类型的数据
      //reject 拒绝  函数类型的数据
      const p = new Promise((resolve, reject) => {
        setTimeout(() => {
          //30% 1-100 1 2  30
          //获取1-100的一个随机数
          let n = rand(1, 100);
          //判断
          if (n <= 30) {
            resolve(n); //将Promise对象的状态设置为 【成功】
          } else {
            reject(n); //将Promise对象的状态设置为 【失败】
          }
        }, 1000);
      });

      //调用then方法
      p.then(
        (value) => {
          alert("恭喜,奖品为10万 RMB 劳斯莱斯优惠卷,您的中奖数字为" + value);
        },
        (reason) => {
          alert("再接再厉,您的号码为" + reason);
        }
      );
    });
  </script>
</html>
